<template>
  <div id="fl_xr">
      <fl></fl>
      <div class="fl_xr">
          <ul>
              <li v-for="(item) in fl_xrList" :key="item.info_id">
                <img :src="item.image_ext_url" alt="">
                <p class="p1">{{item.extra.name}}</p>
                <p class="p2">{{item.extra.watching_focus}}</p>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>

import fl from '../components/fl.vue';

export default {
    components:{
        fl
    },
    data() {
        return {
            fl_xrList:[]
        }
    },
    created() {
        this.$axios.get('page_recommend_list?mca=h5_recommend_male&_type=h5').then((res) => {
            console.log(res.data);
            this.fl_xrList = res.data.data.h5_recommend_male_fine_works
        })
    }
}
</script>

<style>
.fl_xr{
    height: 500px;
    /* background-color: pink; */
}
.fl_xr ul li{
    width: 187px;
    height: 135px;
    /* border: 1px solid black; */
    float: left;
    text-align: center;
}
.fl_xr ul li img{
    width: 170px;
    height: 89px;
    margin: 0 0;
}
.fl_xr .p1{
    width: 58px;
    height: 17px;
    /* border: 1px solid black; */
    font-size: 0.875rem;
    color: #666;
    margin-left: 7px;
    overflow: hidden;
}
.fl_xr .p2{
    width: 98px;
    height: 13px;
    /* border: 1px solid black; */
    font-size: 0.75rem;
    color: #999;
    margin-left: 6px;
    overflow: hidden;
}
</style>